﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example04.aspx.cs" Inherits="Chapter32.Example04" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 32-4 使用 XMLHttpRequest 定义的一次性事件</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        table {
            margin: 10px;
            border-collapse: collapse;
            float: left;
        }

        div {
            margin: 10px;
        }

        td, th {
            padding: 4px;
        }
    </style>
</head>
<body>
    <div>
        <button>Example01.Apples</button>
        <button>Example01.Cherries</button>
        <button>Example01.Bananas</button>
    </div>
    <table id="events" border="1"></table>
    <div id="target">Press a button</div>
    <script>
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = handleButtonPress;
        }

        function handleButtonPress(e) {
            clearEventDetails();
            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = handleResponse;
            httpRequest.onerror = handleError;
            httpRequest.onload = handleLoad;
            httpRequest.onloadend = handleLoadEnd;
            httpRequest.onloadstart = handleLoadStart;
            httpRequest.onprogress = handleProgress;
            httpRequest.open("GET", e.target.innerHTML + ".aspx");
            httpRequest.send();
        }

        function handleResponse(e) {
            displayEventDetails("readystate(" + e.target.readyState + ")");
            if (e.target.readyState == e.target.DONE && e.target.status == 200) {
                document.getElementById("target").innerHTML = e.target.responseText;
            }
        }

        function handleError(e) {
            displayEventDetails("error", e);
        }

        function handleLoad(e) {
            displayEventDetails("load", e);
        }

        function handleLoadEnd(e) {
            displayEventDetails("loadend", e);
        }

        function handleLoadStart(e) {
            displayEventDetails("loadstart", e);
        }

        function handleProgress(e) {
            displayEventDetails("progress", e);
        }

        function clearEventDetails() {
            document.getElementById("events").innerHTML =
                "<tr><th>Event</th><th>lengthComputable</th><th>loaded</th><th>total</th></tr>";
        }

        function displayEventDetails(eventName, e) {
            if (e) {
                document.getElementById("events").innerHTML +=
                    "<tr><td>" + eventName + "</td><td>" + e.lengthComputable +
                    "</td><td>" + e.loaded + "</td><td>" + e.total + "</td></td>";
            } else {
                document.getElementById("events").innerHTML +=
                    "<tr><td>" + eventName + "</td><td>NA</td><td>NA</td><td>NA</td></td>";
            }
        }
    </script>
</body>
</html>
